<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title>task_2</title>
	</head>

	<body>

		<header id="header">
			<div class="bar-img">
				<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
			</div>
			<div class="link">
				<ul>
					<li>
						<a href="###">导航链接一</a>
					</li>
					<li>
						<a href="###">导航链接二</a>
					</li>
					<li>
						<a href="###">导航链接三</a>
					</li>
					<li>
						<a href="###">导航链接四</a>
					</li>
				</ul>
			</div>
		</header>

		<!--第一部分-->
		<div id="section">
			<div class="message">
				<h2>文章一级标题</h2>
				<h2>文章二级标题</h2>
				<p>文章作者 文章发表时间<br /></p>
			</div>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br /> 换行了
				<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>,这是一个很长很长的段落，<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
			</p>
			<img src="img/20151011195344_aVZRx.jpeg" width="200" height="200" />
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br /> 换行了
				<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<br /> 这是一个很长很长的段落，这是一个很长很长的段落，
				<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>,这是一个很长很长的段落，<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<br />
			</p>
		</div>

		<!--第二部分-->
		<div id="section">
			<div class="message">
				<h2>另一篇文章一级标题</h2>
				<h2>文章二级标题</h2>
				<p>文章作者 文章发表时间<br /></p>
			</div>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br /> 换行了
				<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>,这是一个很长很长的段落，<br /> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
			</p>
			<img src="img/20151011195344_aVZRx.jpeg" width="200" height="200" />
			<ul style="margin: 15px;">
				<li>列表项目一</li>
				<li>列表项目二</li>
				<li>列表项目三</li>
			</ul>
			<h2>图片</h2>
			<div class="picture">
				<p>好看的图片</p>
				<img src="img/20151011195344_aVZRx.jpeg" width="200" height="200" />
			</div>

			<div class="picture">
				<p>好看的图片</p>
				<img src="img/20151011195344_aVZRx.jpeg" width="200" height="200" />
			</div>
		</div>

		<!--第三部分-->
		<div id="section">
			<div class="message">
				<h2>最后一篇文章一级标题</h2>
				<h2>文章二级标题</h2>
				<p>文章作者 文章发表时间<br /></p>
			</div>
			<ol style="margin-left: 80px;margin-bottom: 10px;">
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
			</ol>
			<p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
			<table>
				<tr class="table-title">
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td>
						<a href="###">操作</a>
					</td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td>
						<a href="###">操作</a>
					</td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td>
						<a href="###">操作</a>
					</td>
				</tr>
				<tr class="total">
					<td>总计</td>
					<td colspan="2">1000</td>
				</tr>
			</table>
		</div>

		<!--第四部分-->
		<div id="section">
			<h2 class="sidebar">这里以后是一个侧栏，这是侧栏的标题</h2>
			<div id="formstyle">
				<p><span>请输入邮箱地址: </span><input type="text" placeholder="这是一个文本输入框" /></p>
				<p class="tip">邮箱地址请按要求格式输入</p>
				<p><span>请输入密码: </span><input type="text" placeholder="这是一个文本输入框" />
				<p><span>请重复输入密码: </span><input type="text" placeholder="这是一个文本输入框" /></p></p>
				<p class="tip">密码请为6-16位英文数字</p>
				<p><span>性别：</span><input type="radio" value="男" class="radio" />男 <input type="radio" value="女" class="radio" />女 </p>
				<p><span>城市：</span>
					<select name="city">
						<option value="beijing">北京</option>
					</select>
				</p>
				<p><span>爱好： </span><input type="checkbox" value="" />运动
					<input type="checkbox" value="" />艺术
					<input type="checkbox" value="" />科学
				</p>
				<p><span>个人描述: </span><textarea name="message" rows="2" cols="30">The cat was playing in the garden.</textarea></p>
			</div>
			<input type="submit" value="确认提交" class="submit" />

		</div>

	</body>

</html>